import React, { Component } from 'react';
import { Modal, Form, Select, Input, Tabs, Card, Row, Col,Icon } from 'antd';
import PropTypes from 'prop-types';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const TabPane = Tabs.TabPane;
import moment from 'moment';
import { CommonTable } from 'components';
import { orderStatus } from 'utils';
import styles from './InfoModal.less';



const contactsColumns = [
    { title: '姓名', dataIndex: 'contactsName',key: 'contactsName' },
    {
        title: '手机号',
        dataIndex: 'contactsPhone',
        key: 'contactsPhone',
        render(text) {
            return text || '';
        }
    }
];

const operatorColumns = [
    { title: '号码', dataIndex: 'phoneNo', key: 'phoneNo' },
    { title: '号码标签', dataIndex: 'phoneTag', key: 'phoneTag' },
    { title: '归属地', dataIndex: 'area', key: 'area' },
    { title: '近6月主叫通话次数', dataIndex: 'callCountActive6month', key: 'callCountActive6month' },
    { title: '近6月被叫通话次数', dataIndex: 'callCountPassive6month', key: 'callCountPassive6month' },
    { title: '近3月通话次数(次)', dataIndex: 'callCount3month', key: 'callCount3month' },
    { title: '近3月通话时长(分)', dataIndex: 'callTime3month', key: 'callTime3month' },
    { title: '近6月通话次数', dataIndex: 'callCount6month', key: 'callCount6month' },
    { title: '近6月通话时长(分)', dataIndex: 'callTime6month', key: 'callTime6month' },
];

const applyColumns = [
    {
        title: '申请时间',
        dataIndex: 'applyTime',
        key: 'applyTime',
        render(text) {
            return moment(Number(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
        }
    },
    { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
    { title: '正常还款金额', dataIndex: 'deviceMoney', key: 'deviceMoney' },
    { title: '申请期限', dataIndex: 'lendDays', key: 'lendDays' },
    {
        title: '订单状态',
        dataIndex: 'status',
        key: 'status',
        render(text) {
            return orderStatus[text];
        }
    }
]

class InfoModal extends Component{
    layout = {
        labelCol: {
            span: 4
        },
        wrapperCol: {
            span: 20
        }
    }
    constructor(props) {
        super(props);
        this.state = {
            activeKey: '1',
        };
    }

    handleChange = (key) => {
        const { info, handleChange } = this.props;
        this.setState({
            activeKey: key
        });
        switch (Number(key)) {
            case 2:
                info['applyData'].length  === 0 && handleChange(key);
                console.log(info['applyData'])
                break;
            case 3:
                info['contactsData'].length === 0 && handleChange(key);
                break;
            case 4:
                info['operatorData'].length === 0 && handleChange(key);
                break;
            default:
                return false;
        }
    }
    afterClose = () => {
        this.setState({
            activeKey: '1'
        });
    }

    //用户信息
    renderUserInfo = () => {
        console.log(this.props)
        const { info: { userInfo = {} } } = this.props;
        return (
            <div>
                <Card type={'inner'} title={'个人信息'}>
                    <Row gutter={16}>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>姓名：</span><span>{userInfo.nameTrue || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>手机号：</span><span>{userInfo.phoneNo || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>身份证号：</span><span>{userInfo.idcardNo || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>家庭住址：</span><span>{userInfo.address || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>开户银行：</span><span>{userInfo.bankName || ''}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>卡号：</span><span>{userInfo.bankCardNo}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>预留手机号：</span><span>{userInfo.bankPhone}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>注册渠道：</span><span>{userInfo.channelName}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>黑名单状态：</span><span>{userInfo.isBlack ? "是" : "否"}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>借款成功次数：</span><span>{userInfo.successCount}</span></Col>
                    </Row>
                </Card>
                <div className={styles.card}>
                    <Card type={'inner'} title={'客户影像'}>
                        <Row gutter={8}>
                            <Col className={`${styles.col}`} lg={12} xl={8}>
                                {
                                    userInfo['idcardFrontPhoto'] && <img className={styles.imgCol} width={'100%'} src={userInfo['idcardFrontPhoto']}/>
                                }
                            </Col>
                            <Col className={`${styles.col}`} lg={12} xl={8}>
                                {
                                    userInfo['idcardBackPhoto'] && <img className={styles.imgCol} width={'100%'} src={userInfo['idcardBackPhoto']}/>
                                }

                            </Col>
                            <Col className={`${styles.col}`} lg={12} xl={8}>
                                {
                                    userInfo['idcardPortraitPhoto'] && <img className={styles.imgCol} width={'100%'} src={userInfo['idcardPortraitPhoto']}/>
                                }
                            </Col>
                        </Row>

                    </Card>
                </div>

                <Card type={'inner'} title={'认证信息'}>
                    <Row gutter={16}>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>实名认证：</span><span>{userInfo.isIdcard ? "是" : "否"}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>通讯录认证：</span><span>{userInfo.isContacts ? "是" : "否"}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>运营商认证：</span><span>{userInfo.isYys ? "是" : "否"}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>银行卡认证：</span><span>{userInfo.isBank ? "是" : "否"}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>芝麻信用认证：</span><span>{userInfo.isZhimafen ? "是" : "否"}</span></Col>
                    </Row>
            </Card>
                <Card type={'inner'} title={'认证信息'}>
                    <Row gutter={16}>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>人脸识别阀值：</span><span>{userInfo.similarity}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>芝麻分：</span><span>{userInfo.zhimafen}</span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}>同盾分：</span><span>{userInfo.tdreportPoint}</span></Col>
                    </Row>
                </Card>
                <Card type={'inner'} title={'同意协议'}>
                    <Row gutter={16}>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}></span><span><Icon style={{color: '#00be14',marginRight: '3px'}} type="check" /><a style={{textDecoration: 'none'}} target="_blank" href="/h5/register/protocol.html">用户协议</a></span></Col>
                        <Col className={styles.col} lg={12} xl={8}><span className={styles.title}></span><span><Icon style={{color: '#00be14',marginRight: '3px'}} type="check" /><a style={{textDecoration: 'none'}} target="_blank" href="/h5/register/protocol2.html">用款及支付协议</a></span></Col>
                    </Row>
                </Card>
            </div>
        );
    }

    render() {
        const { visible, handleCancel, info, loading } = this.props;
        return (
            <Modal
                footer={null}
                onCancel={handleCancel}
                width={1100}
                visible={visible}
                title={'用户详情'}
                afterClose={this.afterClose}
            >
                <div>
                    <Tabs activeKey={this.state.activeKey} onChange={this.handleChange} animated={false}>
                        <TabPane tab="用户信息" key="1">
                            {this.renderUserInfo()}
                        </TabPane>
                        <TabPane tab="订单信息" key="2">
                            <CommonTable loading={loading} columns={applyColumns} dataSource={info['applyData']}/>
                        </TabPane>
                        <TabPane tab="通讯录" key="3">
                            <CommonTable loading={loading} columns={contactsColumns} dataSource={info['contactsData']}/>
                        </TabPane>
                        <TabPane tab="运营商" key="4">
                            <CommonTable loading={loading} columns={operatorColumns} dataSource={info['operatorData']}/>
                        </TabPane>
                    </Tabs>
                </div>

            </Modal>
        );
    }
}
InfoModal.propTypes = {
    visible: PropTypes.bool,
    handleCancel: PropTypes.func,
    info: PropTypes.object,
    handleChange: PropTypes.func,
    loading: PropTypes.bool
};
InfoModal.defaultProps = {
    visible: false,
    handleCancel(){},
    info: {
        userInfo: {
            nameTrue: 'zs',
            phoneNo: '12345678963',
            idcardNo: '610115123456899652',
            address: '北京市xxxxxxxxx',
            bankName: '开户银行',
            bankCardNo: '661616131331313',
            bankPhone: '12345678963',
            channelName: '123',
            isBlack: '是',
            successCount: '1',
            idcardFrontPhoto: 'xxx',
            idcardBackPhoto: 'xxx',
            idcardPortraitPhoto: 'xxx',
            isIdcard:'1',
            isContacts: '1',
            isYys: '1',
            isBank: '2',
            isZhimafen: '2',
            similarity: '13',
            zhimafen: '600',
            tdreportPoint: '22',
            zmScore: '22',
        },

    },
    handleChange() {},
    loading: false
};
export default InfoModal;